<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${petGood.goodName}</title>
<link rel="stylesheet" type="text/css" href="/resources/css/nav.css">
<link rel="stylesheet" type="text/css" href="/resources/css/left.css">
    <style type="text/css">
    .main{
    	width: 1200px;
		margin: 0px auto;
    }
	.pro-top{
		width: 1200px;
		margin: 0px auto;
		margin-top: 10px;
		overflow: hidden;
	}
	.pro-img{
		width: 650px;
		height: 425px;
		float: left;
	}
	.pro-info{
		float: right;
		width: 520px;

	}
	.pro-info h1,h2{
		float: left;
		width: 520px;
	}
	.pro-title{
		border-bottom: 1px solid;
		font-size: 30px;
   	 	line-height: 50px;
   	    font-weight: normal;
   	    padding-left: 15px;
	}
	.pro-price{
		padding-left: 15px;
		padding-top: 10px;
	}
	.pro-price,#price_item{
		font-size: 25px;
		line-height: 45px;
		font-weight: normal;
   		color: #ff6700;
	}
	.pro-introduce{
		font-size: 16px;
		padding-left: 15px;
		float: right;
		padding-top: 10px;
		height: 45px;
		overflow: hidden;
	}
	.pro-introduce-item{
		float: right;
		width: 500px;
	}
	.petGood-Msg{
		margin-bottom: 10px;
		float: left;
		width: 450x;
	}
	.petGood-Msg span{
		color: #fe7200;
	}
	.pro-panel{
		width: 500px;
		float: right;
		border: 1px  dashed #aaa;
		margin-left: 20px;
		text-align: center;
	}
	.pro-count,.pro-evaluate,.pro-integral{
		padding: 5px 5px 5px 15px;
		float: left;
		letter-spacing: 5px;
		text-align: center;
		width: 125px;
		color: #aaa;
	}
	.count,.evaluate{
			padding-right: 40px;
			border-right: 1px  solid #aaa;
			letter-spacing: 0px;
			color: #c40000;
	}
	.integral{
		letter-spacing: 0px;
		color: #c40000;
	}
	.pro-count{
		margin-left: 40px;
	}
	.p_number{
		width:520px;
		float: right;
	}
	.p_number .pro-action{
		padding-left: 15px;
		padding-top: 20px;
		overflow: hidden;
	}
	.p_number .add_chose{
		width:450px;
		float:left;
	}
	.p_number .add_chose a{
		float:left;margin:5px 0 0 0;
		display:block;width:15px;
		height:15px;line-height:99em;
		overflow:hidden;
		background:url(/resources/images/reduce-add.gif) no-repeat;
	}
	.p_number .add_chose .pro-stock{
		margin-left: 20px;
		float: left;
	}
	.pro-stock,#pro-stock-num{
		font-size: 20px;
		color: #ABA8A8;
	}
	.pro-action h2{
		float: left;
		width: 50px;
		padding-top: 3px;

	}
	.p_number .add_chose a.reduce{
		background-position:0 0;
	}
	.p_number .add_chose a.reduce:hover{
		background-position:0 -16px;
	}
	.p_number .add_chose a.add{
		background-position:-16px 0;
	}
	.p_number .add_chose a.add:hover{
		background-position: -16px -16px;
	}
	.p_number .add_chose .text{
		float:left;margin:0 5px;
		display:inline;border:solid 1px #ccc;
		padding:4px;
		width:35px;
		line-height:18px;
		font-size:15px;
		color:#990000;
		font-weight:800;
		text-align: center;
	}
	.p_number .total-price{
		line-height:2em;
		width: 520px;
		float: left;
		margin-top: 20px;
		color: #ff6700;
		font-size: 26px;
		font-weight: border;
	}
	.p_number .total-price .total-font{
		font-size:26px;
		color: #ff6700;
		font-weight: border;
	}
	.buy{
		float: left;
		margin-top: 20px;
	}
	#buy-pro{
		width: 180px;
        float: right;
        background-color: #ffeded;
        border: 1px solid #c40000;
        padding: 8px;
        text-align: center;
        color: #fff;
	}
	#buy-pro{
		color: #c40000;
	}
	#add-cart{
		margin-left: 10px;
		width: 180px;
        float: right;
        background-color: #c40000;
        border: 1px solid #c40000;
        padding: 8px;
        text-align: center;
        color: #fff;
	}
	.comment{
		width: 850px;
		margin-top: 30px;
		float: right;
	}
	.cont{
		overflow: hidden;
	}
	.comment-title{
		font-size: 16px;
		border-left:#FF4200 4px solid;
		padding-left: 5px;
	}
	 #fInput{
      margin: 10px 10px 10px 30px;
      width: 700px;
      height: 86px;
      resize: none;
      padding: 10px;
      font-size: 16px;
			float: left;
  }
  #fSubmit{
      float: left;
      text-align: center;
      font-size: 16px;
      margin-right: 20px;
      width: 100px;
      height: 35px;
      background: #ffc09f;
      color: #fff;
	  line-height: 16px;
      border:0;
	  margin-left: 30px;
  }

	 .comment-content{
            margin: 10px;
            overflow: hidden;
            border-bottom: 1px solid #ccc0c0;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .face{
            float: left;
            width: 60px;
            height: 60px;
            border-radius: 60px;
            overflow:hidden;
        }
        .ftext{
            width: 688px;
            float: left;
            margin-left: 15px;
        }
        .ftext a h2{
            font-weight: 700;
            font-size: 16px;
            color: #333;
						width: 750px;

        }
        .ftext_from,.ftext_cont,.ftext_pic{
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .ftext_from,.ftext_from span{
            color: #808080;
        }
        .ftext_cont{
            line-height: 18px;
        }
    </style>
</head>
<body>
<!-- 页面导航 -->
<jsp:include page="../head/site-topbar.jsp"/>
<jsp:include page="../head/header.jsp"/>
<div class="main">
	<div class="pro-top">
		<div class="pro-img"><img src="/resources/images/${petGood.goodImg}" alt="" width="650" height="425"></div>
		<div class="pro-info">
			<h1 class="pro-title">${petGood.goodName}</h1>
			<h2 class="pro-price">价格：<span id="price_item">￥${petGood.price}</span></h2>
			<div class="pro-introduce">
				<div class="pro-introduce-item">
					<div class="petGood-Msg">商品信息：<span>${petGood.goodMsg}</span></div>
				</div>
			</div>
		</div>
		<div class="pro-panel">
			<div class="pro-count">销量<span class="count">${petGood.sales}</span></div>
			<div class="pro-evaluate">评价<span class="evaluate">${comments.size()}</span></div>
			<div class="pro-integral">积分<span class="integral">1000</span></div>
		</div>
		<div class="p_number">
			<div class="pro-action">
				<h2>数量：</h2>
				<div class="add_chose">
					<a class="reduce" onClick="setAmount.reduce('#qty_item')" href="javascript:void(0)">
					-</a>
					<input type="text" name="qty_item" value="1" id="qty_item" onKeyUp="setAmount.modify('#qty_item')" class="text" />
					<a class="add" onClick="setAmount.add('#qty_item')" href="javascript:void(0)">
					+</a>
					<div class="pro-stock">库存：<span id="pro-stock-num">${petGood.stock}</span></div>
				</div>

				<div class="total-price">
					总价：<span class="total-font" id="total_item">￥</span>
					<input type="hidden" name="total_price" id="total_price" value="" />
				</div>
				<div class="buy">
					<a href="/buy/addSome?goodId=${petGood.goodId}" id="add-cart">加入购物车</a>
					<a href="buy?pro_id=1" id="buy-pro">立即购买</a>
				</div>
			</div>
		</div>
	</div>
	<div class="comment">
		<div class="cont">
			<h3 class="comment-title">发表评论</h3>
	        <form action="/comment" method="post" onsubmit="return check(this)">
	            <textarea id="fInput" name="content"></textarea>
	            <input type="submit" name="submit" value="发布" id="fSubmit"/>
	        </form>
	    </div>
	 	<div class="cont">
			<h3 class="comment-title">评论</h3>
			<c:if test="${empty comments}">
				<div class='comment-content'>暂无任何评论</div>
			</c:if>
			<c:if test="${!empty comments}">
				<c:forEach var="comment" items="${comments}">
			    	<div class="comment-content">
			       		<div class="face"><img src="/resources/images/userImg/${comment.userImg}" alt="" width="60" height="60"></div>
			       	 	<div class="ftext">
			            	<a href=""><h2>${comment.username}</h2></a>
				            <div class="ftext_from"><span>${comment.cTime}</span></div>
				            <div class="ftext_cont">${comment.content}</div>
			        	</div>
			    	</div>
	    		</c:forEach> 
	    	</c:if>
		</div>
	</div>
	<div class="side">
		<div class="cont"><h1>推荐</h1>
            <ul id="pro-items">
                <li>
                    <a href="/petGood/5"><img src="/resources/images/petGoods/meishi/491945399.jpg" alt="" width="268" height="200"></a>
                    <div class="pro-item">
                        <a href="/petGood/5"><span class="symbol">¥ </span><span class="price">59.00</span></a>
                        <div class="sales"><a href=""><h3>7</h3><h4>销售量：</h4></a></div>
                    </div>
                    <p>狗粮 耐威克</p>
                </li>
                <li>
                    <a href="/petGood/6"><img src="/resources/images/petGoods/meishi/T1CeqMFB8f.jpg" alt="" width="268" height="200"></a>

                    <div class="pro-item">
                        <a href="/petGood/6"><span class="symbol">¥</span><span class="price">99.00</span></a>
                        <div class="sales"><a href=""><h3>2</h3><h4>销售量：</h4></a></div>
                    </div>
                    <p>Royal Canin</p>
                </li>
                <li>
                    <a href="/petGood/22"><img src="/resources/images/petGoods/lingshi/1482493540023101-%E7%8B%97%E7%8B%97%E9%9B%B6%E9%A3%9F.jpg" alt="" width="268" height="200"></a>

                    <div class="pro-item">
                        <a href="/petGood/22"><span class="symbol">¥</span><span class="price">30.00</span></a>
                        <div class="sales"><a href=""><h3>1</h3><h4>销售量：</h4></a></div>
                    </div>
                    <p>鸡肉整枝</p>
                </li>
                <li>
                    <a href="/petGood/23"><img src="/resources/images/petGoods/wanjv/1482494045209102-%E7%8B%97%E7%8B%97%E7%8E%A9%E5%85%B7.jpg" alt="" width="268" height="200"></a>

                    <div class="pro-item">
                        <a href="/petGood/23"><span class="symbol">¥</span><span class="price">14.90</span></a>
                        <div class="sales"><a href=""><h3>1</h3><h4>销售量：</h4></a></div>
                    </div>
                    <p>狗狗玩具球</p>
                </li>

            </ul>
        </div>
	</div>
</div>
<jsp:include page="../head/end.jsp"/>
<script src="/resources/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/resources/js/payfor.js"></script>
<script src="/resources/js/myheader.js"></script>
<script src="/resources/js/left.js"></script>
<script>

	//购物车样式更改
	$(".cart-mini")[0].onmouseover= function(){
	        $(".topbar-cart").css("background","#FFFFFF");
	        $(".car,#goods-num").css("color","#ff6700");
	        $("#cart-icon")[0].src="/resources/images/cart-icon2.png";
	    }
	$(".cart-mini")[0].onmouseout= function(){
	    $(".topbar-cart").css("background","#f8f8f8");
	    $(".car,#goods-num").css("color","#b0b0b0");
	    $("#cart-icon")[0].src="/resources/images/cart-icon.png";
	}

    //检查是否填写内容
    function check(form) {
        if (form.fInput.value == "") {
            alert("你还没写内容呐！");
            return false;
        }
        return true;
    }

</script>
</body>
</html>